<!--
 * @Author: boyyang
 * @Date: 2022-02-03 13:56:29
 * @LastEditTime: 2022-02-05 13:37:19
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\chatRoom\components\chatRoomRightContent.vue
-->
<template>
    <div class="message-wrapper">
        <div v-for="(item, i) in props.messageList" :key="i">
            <!-- <message-content
                :avater-url="item?.avatar"
                :message="item.payload.text as string"
                :name="item.nick"
                :time="item.time"
                :imgs="item.payload?.imageInfoArray"
            ></message-content>-->
            <message-content
                :avater-url="item?.avatar"
                :message="item.payload.text"
                :name="item.nick"
                :time="item.time"
                :imgs="item.payload?.imageInfoArray"
            ></message-content>
        </div>
    </div>
</template>

<script lang="ts" setup>
import MessageContent from './message.vue'

interface IMessageProps {
    messageList?: any[]
}
const props = withDefaults(defineProps<IMessageProps>(), {})

</script>

<style scoped lang="scss">
.message-wrapper {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 275px);
    padding: 10px;
    overflow-y: auto;
}

@media screen and (max-width: 1000px) {
    .message-wrapper {
        height: calc(100% - 190px);
    }
}
</style>
